<template>
  <div class="com-container">
      <div class="com-chart" ref="hot_ref"></div>
      <span class="iconfont to-left" @click="changCurrentData(1)" :style="comStyle">&#xe6ef;</span>
      <span class="iconfont to-right" @click="changCurrentData(-1)" :style="comStyle">&#xe6ed;</span>
      <span class="chart-name" :style="comStyle">{{ showCurrentName }}</span>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { getThemeValue } from '../utils/theme_utils';
export default {
    data () {
        return {
            chartInstance: null,
            allData: null,
            currentData: 0,
            titleFontSize: 0
        }
    },
    created() {
        this.$socket.registerCallBack('hotData', this.getData);
    },
    mounted () {
        this.initChart();
        // this.getData();
        this.$socket.send({
            action: 'getData',
            socketType: 'hotData',
            chartName: 'hot',
            value: ''
        })
        window.addEventListener('resize', this.screenAdapter);
        this.screenAdapter();
    },
    destroyed () {
        window.removeEventListener('resize', this.screenAdapter);
        this.$socket.unRegisterCallBack('hotData');
    },
    computed: {
        showCurrentName () {
            if (!this.allData) {
                return ''
            } else {
               return this.allData[this.currentData].name 
            }  
        },
        comStyle () {
            return {
                fontSize: this.titleFontSize + 'px',
                color: getThemeValue(this.theme).titleColor
            }
        },
        ...mapState(['theme'])
    },
    methods: {
        initChart () {
            this.chartInstance = this.$echarts.init(this.$refs.hot_ref, this.theme);
            const initOption = {
                title: {
                    text: '▎热销商品占比',
                    top: '3%',
                    left: '3%'
                },
                legend: {
                    show: true,
                    icon: 'circle',
                    top: '15%'
                },
                tooltip: {
                    show: true,
                    formatter: (arg) => {
                        const threeGradeData = arg.data.children;
                        let total = 0;
                        let showStr = '';
                        threeGradeData.forEach(item => {
                            total += item.value;
                        });
                        threeGradeData.forEach(item => {
                            showStr += `
                                ${item.name}:${parseInt(item.value / total * 100) + '%'}
                                <br/>
                            `
                        });
                        return showStr
                    }
                },
                series: [
                    {
                        type: 'pie',
                        label: {
                            show: false
                        },
                        emphasis: {
                            label: {
                                show: true
                            },
                            labelLine: {
                                show: false
                            }
                        }
                    }
                ]
            };
            this.chartInstance.setOption(initOption)
        },
        getData (ret) {
            // const {data: ret} = await this.$http.get('hotproduct');
            this.allData= ret;
            this.updateChart()
        },
        updateChart () {
            const seriesData = this.allData[this.currentData].children.map(item => {
                return {
                    name: item.name,
                    value: item.value,
                    children: item.children
                }
            })
            const dataOption = {
                series: [
                    {
                        data: seriesData
                    }
                ]
            };
            this.chartInstance.setOption(dataOption)
        },
        screenAdapter () {
            this.titleFontSize = this.$refs.hot_ref.offsetWidth / 100 * 3.6;
            const adapterOption = {
                title: {
                    textStyle: {
                        fontSize: this.titleFontSize
                    }
                },
                legend: {
                    itemWidth: this.titleFontSize,
                    itemHeight: this.titleFontSize,
                    itemGap: this.titleFontSize / 2,
                    textStyle: {
                        fontSize: this.titleFontSize / 2
                    }
                },
                series: {
                    radius: this.titleFontSize * 4.5,
                    center: ['50%', '60%']
                }
            };
            this.chartInstance.setOption(adapterOption);
            this.chartInstance.resize()
        },
        changCurrentData (n) {
            this.currentData += n;
            if (this.currentData > this.allData.length - 1) {
                this.currentData = 0
            }
            if (this.currentData < 0) {
                this.currentData = this.allData.length - 1
            }
            this.updateChart()
        }
    },
    watch: {
        theme () {
            this.chartInstance.dispose(); // 销毁当前图表
            this.initChart();
            this.screenAdapter();
            this.updateChart();
        }
    }
}
</script>

<style lang="less" scoped>
.to-left {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #fff;
};
.to-right {
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #fff;
}
.chart-name {
    position: absolute;
    right: 10%;
    bottom: 40px;
    color: #fff;
}
</style>>
